<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>关于JavaScript日期的一些小技巧 | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="最近在做小程序，要做一些关于日期方面的计算，于是整理下来，方便下次使用 1. 获得年月日123456789101112function newDateInit() &amp;#123;  let newDate = new Date();  let month = newDate.getMonth();  if (month &amp;lt; 10) &amp;#123;    month = &quot;0&quot; + month;">
<meta name="keywords" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="关于JavaScript日期的一些小技巧">
<meta property="og:url" content="https://storm4542.github.io/archives/9fa8d30b.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="最近在做小程序，要做一些关于日期方面的计算，于是整理下来，方便下次使用 1. 获得年月日123456789101112function newDateInit() &amp;#123;  let newDate = new Date();  let month = newDate.getMonth();  if (month &amp;lt; 10) &amp;#123;    month = &quot;0&quot; + month;">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-08-28T15:21:29.960Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="关于JavaScript日期的一些小技巧">
<meta name="twitter:description" content="最近在做小程序，要做一些关于日期方面的计算，于是整理下来，方便下次使用 1. 获得年月日123456789101112function newDateInit() &amp;#123;  let newDate = new Date();  let month = newDate.getMonth();  if (month &amp;lt; 10) &amp;#123;    month = &quot;0&quot; + month;">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-关于JavaScript日期的一些小技巧" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      关于JavaScript日期的一些小技巧
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2018-08-28T15:17:42.000Z" itemprop="datePublished">2018-08-28</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <p>最近在做小程序，要做一些关于日期方面的计算，于是整理下来，方便下次使用</p>
<h4 id="1-获得年月日"><a href="#1-获得年月日" class="headerlink" title="1. 获得年月日"></a>1. 获得年月日</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">newDateInit</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> newDate = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line">  <span class="keyword">let</span> month = newDate.getMonth();</span><br><span class="line">  <span class="keyword">if</span> (month &lt; <span class="number">10</span>) &#123;</span><br><span class="line">    month = <span class="string">"0"</span> + month; <span class="comment">//补齐</span></span><br><span class="line">  &#125;</span><br><span class="line">  day = newDate.getDate();</span><br><span class="line">  <span class="keyword">if</span> (newDate.getDate() &lt; <span class="number">10</span>) &#123;</span><br><span class="line">    day = <span class="string">"0"</span> + day; <span class="comment">//补齐</span></span><br><span class="line">  &#125;</span><br><span class="line">  year = newDate.getFullYear();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h4 id="2-计算前一天，后一天"><a href="#2-计算前一天，后一天" class="headerlink" title="2.计算前一天，后一天"></a>2.计算前一天，后一天</h4><p>一开始我考虑假如我现在是 1 号，前一天不就是 0 了吗？其实不用考虑这么多，JS 帮我们做好了判断。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> currentDate = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line"><span class="keyword">var</span> currentDay = currentDate.getDate();</span><br><span class="line"><span class="keyword">var</span> currentMonth = currentDate.getMonth();</span><br><span class="line"><span class="keyword">var</span> currentYear = currentDate.getFullYear();</span><br><span class="line"><span class="comment">//现在要计算明天的日期</span></span><br><span class="line"><span class="keyword">var</span> nextDate = <span class="keyword">new</span> <span class="built_in">Date</span>(currentYear,currentMonth,currentDay+<span class="number">1</span>);</span><br><span class="line"><span class="comment">//前一天的日期</span></span><br><span class="line"><span class="keyword">var</span> preDate = <span class="keyword">new</span> <span class="built_in">Date</span>(currentYear,currentMonth,currentDay<span class="number">-1</span>);</span><br><span class="line"><span class="comment">//下个月，上个月同理</span></span><br></pre></td></tr></table></figure>
<p>无需考虑边界问题。</p>
<h4 id="3-假如给的是-2018-01-03-这种数值，传回去也要这种类型怎么办？"><a href="#3-假如给的是-2018-01-03-这种数值，传回去也要这种类型怎么办？" class="headerlink" title="3.假如给的是 2018-01-03 这种数值，传回去也要这种类型怎么办？"></a>3.假如给的是 2018-01-03 这种数值，传回去也要这种类型怎么办？</h4><p>先用 split 分隔为数组，再转换为 Number ，再进行加减，再转换为 String ,再拼接</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">data() &#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    currentYear: <span class="number">2018</span>,</span><br><span class="line">    currentMonth: <span class="number">9</span>,</span><br><span class="line">    currentDay: <span class="number">1</span>,</span><br><span class="line">    currentDate: <span class="string">"2018-09-01"</span>,</span><br><span class="line">  &#125;</span><br><span class="line">&#125;,</span><br><span class="line">methods: &#123;</span><br><span class="line">  currentDateSplit() &#123;  <span class="comment">//用 '-'分隔传入数组</span></span><br><span class="line">    <span class="keyword">let</span> num = [];</span><br><span class="line">    <span class="keyword">let</span> str = [];</span><br><span class="line">    <span class="keyword">let</span> current = <span class="keyword">this</span>.currentDate.split(<span class="string">"-"</span>);</span><br><span class="line">    current.forEach(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line">      num.push(<span class="built_in">parseInt</span>(item));</span><br><span class="line">    &#125;);</span><br><span class="line">    <span class="keyword">return</span> num;</span><br><span class="line">  &#125;,</span><br><span class="line">  newDateInit(newDate) &#123; <span class="comment">// 初始化 新生成的日期</span></span><br><span class="line">    <span class="keyword">this</span>.currentMonth = newDate.getMonth();</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">this</span>.currentMonth &lt; <span class="number">10</span>) &#123;</span><br><span class="line">      <span class="keyword">this</span>.currentMonth = <span class="string">"0"</span> + <span class="keyword">this</span>.currentMonth; <span class="comment">//补齐</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">this</span>.currentDay = newDate.getDate();</span><br><span class="line">    <span class="keyword">if</span> (newDate.getDate() &lt; <span class="number">10</span>) &#123;</span><br><span class="line">      <span class="keyword">this</span>.currentDay = <span class="string">"0"</span> + newDate.getDate(); <span class="comment">//补齐</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">this</span>.currentYear = newDate.getFullYear();</span><br><span class="line">  &#125;,</span><br><span class="line">  preDay() &#123;  <span class="comment">//前一天</span></span><br><span class="line">    <span class="keyword">let</span> num = <span class="keyword">this</span>.currentDateSplit();</span><br><span class="line">    <span class="keyword">let</span> newDate = <span class="keyword">new</span> <span class="built_in">Date</span>(num[<span class="number">0</span>], num[<span class="number">1</span>], num[<span class="number">2</span>] - <span class="number">1</span>);</span><br><span class="line">    <span class="keyword">this</span>.newDateInit(newDate);</span><br><span class="line">    <span class="keyword">this</span>.DateJoin();</span><br><span class="line">  &#125;,</span><br><span class="line">  nextDay() &#123; <span class="comment">// 后一天</span></span><br><span class="line">    <span class="keyword">let</span> num = <span class="keyword">this</span>.currentDateSplit();</span><br><span class="line">    <span class="keyword">let</span> newDate = <span class="keyword">new</span> <span class="built_in">Date</span>(num[<span class="number">0</span>], num[<span class="number">1</span>], num[<span class="number">2</span>] + <span class="number">1</span>);</span><br><span class="line">    <span class="keyword">this</span>.newDateInit(newDate);</span><br><span class="line">    <span class="keyword">this</span>.DateJoin();</span><br><span class="line">    <span class="keyword">this</span>.DateJoin();</span><br><span class="line">  &#125;,</span><br><span class="line">  DateJoin() &#123; <span class="comment">//拼接为 'xxxx-xx-xx' 返回去</span></span><br><span class="line">    <span class="keyword">this</span>.currentDate = </span><br><span class="line">        <span class="keyword">this</span>.currentYear + <span class="string">"-"</span> + <span class="keyword">this</span>.currentMonth + <span class="string">"-"</span> + <span class="keyword">this</span>.currentDay;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="a431a66.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          Vue父子传参的方式
        
      </div>
    </a>
  
  
    <a href="599cc31e.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">如何在mpvue中使用第三方UI组件</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/9fa8d30b.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
